<template>
	<view class="content">
		<view class="card" v-if="datalist.length > 0" v-for="(item, idx) in datalist" :key="'card' + idx">
			<view class="space-between size">
				<span style="display: flex;">订单编号: <b style="color: red">{{ item.order_no }}</b></span>
				<span class="status">{{ item.status_text }}</span>
			</view>
			<view>
				<span>投诉信息:</span>
				{{ item.message }}
				<uv-album v-if="item?.imgs?.length>0" :urls="item.imgs" multipleSize="128rpx" space="8rpx"></uv-album>
			</view>
			<view>
				<span>投诉反馈:</span>
				<uv-textarea v-model="item.cancel_remark" disabled autoHeight placeholder="正在处理，请耐心等待。"></uv-textarea>
			</view>
		</view>
		<Loading v-if="loading"></Loading>
		<uv-empty v-else-if="datalist?.length == 0"></uv-empty>
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onReachBottom,
		onPullDownRefresh,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import Loading from '../../components/loading/loading'
	const app = getApp()
	const loading = ref(false)
	const datalist = ref([])
	const page = ref(1)
	onLoad(() => {
		uni.pageScrollTo({
			scrollTop: 0
		})
		getData()
	})
	const getData = () => {
		loading.value = true
		app.post('api.auth.complaint/index', {
			page: page.value
		}).then(res => {
			res.list.map(item => {
				if (item.imgs) {
					item.imgs = item.imgs.split(',')
				}
			});
			datalist.value = res.page.current == 1 ? res.list : datalist.value.concat(res.list)
			page.value = res.page.total <= 10 ? 1 : res.page.current + 1
			loading.value = false
		}).catch(error => {
			loading.value = false
			console.log(error);
		})
	}
	onReachBottom(() => {
		getData()
	})
</script>


<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px;
	}

	.card {
		background-color: white;
		padding: 10px;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.123);
		display: flex;
		flex-direction: column;
		gap: 10px;

		::v-deep.nut-cell {
			padding: 0;
		}

		.size {
			font-size: small;
			-webkit-line-clamp: 3;
		}

		.column {
			background-color: lavender;
		}

		.weight {
			font-weight: 700;
		}


		.status {
			color: orange;
			font-weight: blod;
		}

		.fontLong {
			-webkit-box-orient: vertical;
			display: -webkit-box;
			word-break: break-all;
		}

		.yajin {
			width: 120px;
			text-align: center;
			background-color: #f5f5f5;
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			flex-flow: wrap;
		}
	}
</style>